<template>
	<view class="container">
		<view class="header">
			<image class="background-image" src="/static/img/5.png" mode="aspectFill"></image>
			<view class="search-bar">
				<picker onChange="bindPickerChange" :value="cityIndex" :range="cities">
					<view class="picker">{{ cities[cityIndex] }}</view>
				</picker>
				<input class="search-input" placeholder="请输入搜索文字" onInput="bindKeyInput" @input="bindKeyInput"
					onConfirm="doneSearch" />
				<view class="cancel">
					<ant-button type="primary" inline onTap="doneSearch" className="round">搜索</ant-button>
				</view>
			</view>
		</view>

		<!-- 推荐住宿 -->
		<view class="recommend-section" onTap="zsxq">
			<view class="section-title">推荐住宿</view>
			<block v-for="(item, index) in tuijian" :key="index">
				<view class="hotel-card">
					<image class="hotel-image" :src="item.img" mode="aspectFill"></image>
					<view class="hotel-info">
						<view class="hotel-name">{{ item.name }}</view>
						<view class="hotel-type">{{ item.introduce }}</view>
						<view class="hotel-tags">
							<text class="tag">{{ item.tags }}</text>
						</view>
						<view class="hotel-location">{{ item.address }}</view>
						<view class="hotel-price">￥{{ item.price }}</view>
					</view>
					<view class="hotel-rating">评分 {{ item.phone }}</view>
				</view>
			</block>
		</view>
		<block v-if="noData">
			<view class="no-more-container">
				<image mode="scaleToFill" src="https://ffa.firstui.cn/uploadfile/240901193015838.png"
					class="no-more-image" />
				<view class="no-more">暂无更多</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {

		// 页面加载时获取推荐列表
		data() {
			return {
				collected: false,
				address: "",
				click: 0,
				createTime: "",
				goodsclass: "",
				goodsid: 0,
				img: "",
				introduce: "",
				name: "",
				phone: "",
				price: 0,
				tags: "",
				tuijian: [],
				// 保存推荐列表
				searchText: '',
				// 保存搜索文本
				addressname: '',
				classname: '',
				searchname: '',
				cities: ['广东', '安徽', '内蒙古', '广西', '吉林', '云南'],
				cityIndex: 0,
				noData: false // 无数据标志
			};
		},
		onLoad() {
			this.loadRecommendations();
		},
		methods: {
			// 更新 searchText 数据
			bindKeyInput(e) {
				this.setData({
					searchText: e.detail.value
				});
				console.log(e.detail.value);
			},

			// 搜索操作
			doneSearch() {
				const {
					searchText,
					cityIndex,
					cities
				} = this;
				const selectedCity = cities[cityIndex]; // 获取选择的城市

				uni.request({
					url: url + '/searchGoods',
					method: 'POST',
					data: {
						addressname: selectedCity,
						// 使用选择的城市进行筛选
						searchname: searchText,
						classname: '住宿' // 使用搜索文本进行筛选
					},
					headers: {
						'content-type': 'application/json'
					},
					dataType: 'json',
					success: res => {
						console.log('Request succeeded:', res); // 检查返回的数据
						if (res.data && res.data.data) {
							this.setData({
								tuijian: res.data.data,
								// 更新 tuijian 列表，触发页面重新渲染
								noData: res.data.data.length === 0 // 根据结果判断是否有数据
							});
						} else {
							this.setData({
								noData: true
							}); // 没有返回数据时显示暂无更多
							console.error('No data found in response:', res);
						}
					},
					fail: error => {
						console.error('Request failed', error);
						this.setData({
							noData: true
						}); // 请求失败时也显示暂无更多
					}
				});
			},

			loadRecommendations() {
				const {
					cityIndex,
					cities
				} = this;
				const selectedCity = cities[cityIndex]; // 获取选择的城市

				uni.request({
					url: url + '/searchGoods',
					method: 'POST',
					data: {
						addressname: selectedCity,
						// 使用选择的城市进行筛选
						classname: '住宿',
						searchname: ''
					},
					headers: {
						'content-type': 'application/json'
					},
					dataType: 'json',
					success: res => {
						if (res.data.data) {
							this.setData({
								tuijian: res.data.data,
								noData: res.data.data.length === 0 // 根据结果判断是否有数据
							});
							console.log(res.data.data);
						} else {
							this.setData({
								noData: true
							}); // 没有返回数据时显示暂无更多
						}
					},
					fail: error => {
						console.error('Request failed', error);
						this.setData({
							noData: true
						}); // 请求失败时也显示暂无更多
					}
				});
			},

			// 处理城市选择改变
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为' + e.detail.value);
				this.setData({
					cityIndex: e.detail.value
				});
				console.log('选择的城市为' + this.cities[this.cityIndex]);

				// 根据新选择的城市重新加载推荐列表
				this.loadRecommendations();
			},

			// 处理跳转
			zsxq() {
				uni.navigateTo({
					url: '/pages/jiudianxiangqing/jiudianxiangqing'
				});
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.header {
		position: relative;
	}

	.background-image {
		width: 100%;
		height: 150px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 20px;
		width: 100%;
		padding: 0 10px;
	}

	.picker {
		flex: 1;
		margin-right: 10px;
	}

	.search-input {
		display: flex;
		margin-right: 10px;
		border-radius: 10px;
		width: 240px;
	}

	.search-button {
		display: flex;
		border-radius: 20px;
		background-color: #3a94ee;
		width: 48px;
		height: 35px;
	}

	.recommend-section {
		padding: 10px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.hotel-card {
		display: flex;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		overflow: hidden;
	}

	.hotel-image {
		width: 102px;
		height: 102px;
	}

	.hotel-info {
		padding: 10px;
		flex: 1;
	}

	.hotel-name {
		font-size: 16px;
		font-weight: bold;
	}

	.hotel-type,
	.hotel-location {
		font-size: 14px;
		color: #666;
	}

	.hotel-price {
		font-size: 14px;
		color: rgb(224, 57, 88);
	}

	.hotel-tags .tag {
		margin-right: 5px;
		background-color: #eee;
		padding: 2px 5px;
		border-radius: 3px;
		color: #ee3a49;
	}

	.hotel-rating {
		padding: 10px;
		font-size: 14px;
		color: #f60;
	}

	.no-more-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		/* 或根据需要设置合适的高度 */
		text-align: center;
	}

	.no-more-image {
		width: 150rpx;
		/* 根据需要调整图片大小 */
		height: 150rpx;
		/* 根据需要调整图片大小 */
		margin-bottom: 20rpx;
		/* 图片与文字之间的间距 */
		margin-top: 170px;
	}

	.no-more {
		font-size: 32rpx;
		/* 根据需要调整字体大小 */
		color: #999;
		/* 根据需要调整字体颜色 */
	}
</style>